<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table :data="skuList" border stripe v-loading="loading">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="名称" prop="skuName"> </el-table-column>
      <el-table-column label="描述" prop="skuDesc"> </el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img
            v-if="row.skuDefaultImg"
            :src="row.skuDefaultImg"
            width="100"
            height="100"
            alt=""
          />
          <el-tag v-else type="danger" size="small" effect="dark"
            >暂无图片</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"> </el-table-column>
      <el-table-column label="价格" prop="price"> </el-table-column>
      <el-table-column label="操作" width="300">
        <template v-slot="{ row }">
          <el-button
            type="info"
            size="small"
            v-if="row.isSale === 0"
            icon="ele-Top"
            @click="onSale(row.id)"
          ></el-button>
          <el-button
            v-else
            type="success"
            size="small"
            icon="ele-Bottom"
            @click="cancelSale(row.id)"
          ></el-button>
          <el-button type="primary" size="small" icon="ele-Edit"></el-button>
          <el-button
            type="info"
            size="small"
            icon="ele-Warning"
            @click="showDetail(row.id)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="ele-Delete"
            @click="deleteSku(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :total="totalNum"
      :page-sizes="[10, 20, 30, 40]"
      layout=" prev, pager, next,total, sizes, jumper"
      background
    >
      :pager-count="7">
    </el-pagination>

    <el-drawer
      v-model="drawer"
      direction="rtl"
      :with-header="false"
      :show-close="false"
      size="50%"
    >
      <el-row :gutter="20">
        <el-col :span="6">SKU名称</el-col>
        <el-col :span="18">{{ skuDetail?.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">SKU描述</el-col>
        <el-col :span="18">{{ skuDetail?.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">SKU价格</el-col>
        <el-col :span="18">{{ skuDetail?.price }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            type="info"
            size="small"
            effect="dark"
            v-for="item in skuDetail?.skuAttrValueList"
            :key="item.id"
            :style="{ margin: '3px' }"
            >{{ item.attrName }}--{{ item.valueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            type="info"
            size="small"
            effect="dark"
            v-for="item in skuDetail?.skuSaleAttrValueList"
            :key="item.id"
            :style="{ margin: '3px' }"
            >{{ item.saleAttrName }}--{{ item.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel trigger="click" height="150px" ref="carousel">
            <el-carousel-item
              v-for="item in skuDetail?.skuImageList"
              :key="item.id"
            >
              <div :style="{ textAlign: 'center' }">
                <img :src="item.imgUrl" height="150" alt="" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import type { skuInfoType, skuListType } from "@/api/spu";
import {
  reqSkuList,
  reqOnSale,
  reqCancelSale,
  reqSkuDetail,
  reqDeleteSku,
} from "@/api/sku";
import { ElMessage } from "element-plus";

//初始化页码数据
const currentPage = ref(1);
const pageSize = ref(10);
const totalNum = ref(0);

const loading = ref(false);

//初始化sku列表数据
const skuList = ref<skuListType>([]);

//封装一个初始化请求
const getSkuList = async () => {
  try {
    loading.value = true;
    const result = await reqSkuList(currentPage.value, pageSize.value);
    skuList.value = result.records;
    totalNum.value = result.total;
    loading.value = false;
  } catch (e: any) {
    ElMessage.error("请求列表失败:" + e.message);
  }
};

onMounted(() => {
  getSkuList();
});

watch([currentPage, pageSize], () => {
  getSkuList();
  window.scrollTo(0, 0);
});

//上架逻辑
const onSale = async (id: number) => {
  try {
    await reqOnSale(id);
    getSkuList();
  } catch (e: any) {
    ElMessage.error("上架失败:" + e.message);
  }
};

// 下架逻辑
const cancelSale = async (id: number) => {
  try {
    await reqCancelSale(id);
    getSkuList();
  } catch (e: any) {
    ElMessage.error("下架失败:" + e.message);
  }
};

//初始化抽屉开关数据
const drawer = ref(false);
//初始化接受的详细信息数据
const skuDetail = ref<skuInfoType>();

//获取轮播图
const carousel = ref();

//打开抽屉事件
const showDetail = async (id: number) => {
  drawer.value = true;
  try {
    const result = await reqSkuDetail(id);
    skuDetail.value = result;

    nextTick(() => {
      carousel.value.setActiveItem(0);
    });
  } catch (e: any) {
    ElMessage.error("请求详细信息失败" + e.message);
  }
};

//删除sku
const deleteSku = async (id: number) => {
  try {
    loading.value = true;
    await reqDeleteSku(id);
    getSkuList();
  } catch (e: any) {
    ElMessage.error("删除sku失败:" + e.message);
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

/* 如果说是原生css样式,则直接使用 >>> 穿透即可 */
/* .el-row >>> .el-carousel__button {
  background-color: red;
} */

/* 如果在v3中使用预处理器,则可以使用 :deep() */
.el-row :deep(.el-carousel__button) {
  background-color: red;
}
</style>
